<!-- 下拉菜单内容 -->
<template>
	<view v-show="show1" class="es-dropdown-item" :class="{show: show2}">
		<block v-if="!slots.default && !slots.$default">
			<scroll-view class="es-dropdown-item__scroll" scroll-y="true">
				<view class="es-dropdown-item__options">
					<view v-for="(item, index) in tOptions" :key="index"
						class="item"
						:class="{active: item.value == modelValue}"
						@click="choseItem(item, index)">
						<view class="label">{{item.label}}</view>
						<icon class="icon" type="success_no_circle" size="16" color="currentColor"></icon>
					</view>
				</view>
			</scroll-view>
		</block>
		<view v-else class="es-dropdown-item__slotbox" @tap.stop>
			<slot/>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, watch, inject, useSlots, onMounted, getCurrentInstance } from 'vue'

// 获取当前组件实例
const instance = getCurrentInstance();


// 注入父组件上下文
const MDropDownMenu = inject('MDropDownMenu')

const slots = useSlots();
const emits = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
	modelValue: {
		type: [String,Number,Boolean]
	},
	title: {
		type: String,
		default: '',
	},
	options: {
		type: Array,
		default: () => ([])
	},
	emptyText: {
		type: String,
		default: '全部'
	}
})

function getId() {
  return Number(Math.random().toString().substr(3, 5)) + Date.now();
}

const id = getId();
const active = ref(false);
const show1 = ref(false);
const show2 = ref(false);
const currentText = ref('');

const tOptions = computed(() => {
	let arr = [
		{label: props.emptyText, value: undefined},
		...props.options
	]
	return arr;
})
watch(() => props.modelValue, (val) => {
	let oItem = props.options.find(item => item.value == props.modelValue);
	currentText.value = oItem?.label || props.title;
}, {
	immediate: true
})
watch(() => active.value, (val) => {
	if(val) {
		show1.value = true;
		setTimeout(() => {
			show2.value = true;
		}, 30);
	} else {
		show2.value = false;
		setTimeout(() => {
			show1.value = false;
		}, 300);
	}
})


const choseItem = (item, index) => {
	if(props.modelValue == item.value) {
		return;
	}
	emits('update:modelValue', item.value);
	emits('change', item.value);
	setTimeout(() => {
		console.log(props.modelValue)
	}, 100)
}

const toggle = () => {
	MDropDownMenu.toggle(id);
}

onMounted(() => {
	MDropDownMenu.registerItem({
		id,
		title: props.title,
		options: props.options,
		active,
		currentText,
	})
})

defineExpose({
	toggle
})

</script>
<style lang="scss" scoped>
.es-dropdown-item { 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateY(-200rpx);
	opacity: 0;
	transition: all .2s;
	display: flex;
	flex-direction: column;
	&.show {
		opacity: 1;
		transform: translateY(0);
	}
	.es-dropdown-item__slotbox {
		background: #fff;
	}
	.es-dropdown-item__scroll {
		height: 100%;
	}
	.es-dropdown-item__options {
		background: #fff;
		.item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 32rpx;
			&.active {
				color: $uni-color-primary;
				.icon {
					display: block;
				}
			}
			.label {
				line-height: 48rpx;
				font-size: 28rpx;
			}
			.icon {
				display: none;
			}
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 32rpx;
				right: 32rpx;
				border-bottom: 2rpx solid #ebedf0;
			}
		}
	}
}
</style>